<template>
<div class="main-container">
  <div class="operator">
    <router-link :to="{path: '/user/basic/edit', query: {}}">
    <el-button type="primary" size="small" icon="el-icon-plus">添加业务</el-button>
    </router-link>&nbsp;&nbsp;
    <el-button type="primary" size="small" icon="el-icon-setting" @click="openDialog()">设置审核角色</el-button>&nbsp;&nbsp;
<!--    <el-radio-group v-model="page_data.assoc_app_id" size="small" @change="getList">
      <el-radio-button label="" >全部应用</el-radio-button>
      <el-radio-button :label="item.id" v-for="(item, k) in app_list" :key="k">{{item.name}}</el-radio-button>
    </el-radio-group>&nbsp;&nbsp;-->

    <el-radio-group v-model="page_data.type" size="small" @change="getList">
      <el-radio label="0">全部</el-radio>
      <el-radio label="1">应用业务</el-radio>
      <el-radio label="2">选项业务</el-radio>
    </el-radio-group>
  </div>
  <div class="table_data">
<!--    <el-tabs v-model="page_data.level" @tab-click="handleClick">
      <el-tab-pane label="我的业务" name="1">
      </el-tab-pane>
      <el-tab-pane label="平台业务" name="0">
      </el-tab-pane>
    </el-tabs>-->
    <div class="data_list" v-for="(item,key) in list" :key="key">
      <div class="name">
        <div class="text">{{ item.name }}</div>
        <div class="action">
          <router-link :to="{path: '/user/basic/edit', query:{id: item.id}}" v-if="page_data.level == 1">
            <i class="el-icon-edit"></i>
          </router-link>
        </div>
      </div>
      <div class="item_content">
        <div class="item_list">
          <div class="label">别名：</div><div class="value">{{ item.alias_name }}</div>
        </div>
        <div class="item_list">
          <div class="label">编码：</div><div class="value">{{ item.code }}</div>
        </div>
        <div class="item_list">
          <div class="label">类型：</div><div class="value">{{ item.type }}</div>
        </div>
        <div class="item_list">
          <div class="label">关联应用：</div>
          <div class="value" v-if="item.assoc_app_name">{{ item.assoc_app_name }}</div>
          <div class="value" v-else style="color:#c3c3c3">无</div>
        </div>
        <div class="item_list">
          <div class="label">数据：</div>
          <div class="value">待审核<span class="count">10</span>条， 已审核<span>20</span>条</div>
        </div>
      </div>
      <div class="operator">
        <div class="operator_status">
          <el-switch v-model="item.status" active-value="1" inactive-value="2" @change="update(item, 'status')"></el-switch>
        </div>
        <div class="operator_action">
        <div>
          <router-link :to="{path: '/user/basic/manage', query:{bid: item.id,name:item.name}}" v-if="page_data.level == 1">
          管 理
          </router-link>
        </div>
        </div>
      </div>
    </div>
  </div>
  <div class="pagination">
    <Page :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit" @pagination="getList" />
  </div>


</div>
</template>

<script>
import { getList,updateExt,join } from '@/api/user/basic'
export default {
  name: "basic_index",
  components: {},
  data() {
    return {
      value: true,
      loading: false,
      dialog: {
        status: false,
      },
      list:[],
      app_list: [],
      app: 'basic',
      app_code: 'basic_business',
      page_data: {
        page: 1,
        limit: 30,
        total: 0,
        level: '1',
        type: '0',
        status: -1,
        assoc_app_id: ''
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    openDialog() {
      this.dialog.status = true
    },
    join(id) {
      this.$confirm('确认添加到我的业务中？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        join({id:id}).then(res => {
          if (res.code == 0) {
            this.$message({
              type: 'success',
              message: '添加成功!'
            });
            this.page_data.page = 1
            this.page_data.level = '1'
            this.getList()
          }
        })

      }).catch(() => {

      })
    },
    handleClick() {
      this.page_data.page = 1
      this.getList()
    },
    getList() {
      getList(this.page_data).then(res => {
        if (res.code == 0) {
          this.page_data.level = res.data.level
          this.page_data.total = res.data.count
          this.list = res.data.list
          this.app_list = res.data.app_list
        }
      })
    },
    update(row,field) {
      updateExt({id:row.id, field: field,value:row[field]}).then(res=>{
        if (res.code == 0) {
          this.getList()
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.operator {
  margin: 10px 10px;
}
.data_list {
  width: 18%;
  background: #fff;
  border-radius: 5px;
  font-size: 14px;
  margin-right: 10px;
  .name {
    line-height: 34px;
    background: #00907f;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: flex;
    justify-content: space-between;
    .text {
      color:#fff;
      font-weight: bold;
      margin-left: 10px;
    }
    .action {
      margin-right: 8px;
      color:#fff;
      /deep/.el-icon-edit {
        color:#fff;
        font-size: 16px;
      }
    }
  }
  .item_content {
    width: 94%;
    margin: 0 auto;
    border-bottom: 1px solid #f3f3f3;
    padding: 6px 0 6px 0;
    .item_list {
      line-height: 24px;
      display: flex;
      font-size: 14px;
      .label {
        color:#BEBEBE;
        margin-right: 0px;
      }
      .value {
        font-size: 14px;
        color:#333333;
        overflow: hidden; /* 确保超出容器的内容被裁剪 */
        white-space: nowrap; /* 确保文本在一行内显示 */
        text-overflow: ellipsis; /* 超出部分显示省略号 */
        .count {
          color: red;
        }
      }
    }
  }
  .operator {
    display: flex;
    justify-content: space-between;
    div {
      color:#00907f;
    }
    .operator_action {
      display: flex;
      justify-content: flex-end;
      div {
        margin: 0 0px 0 10px;
      }
    }
  }
}
</style>